<!--
 * @Author: tian_biao
 * @Date: 2021-07-09 14:08:38
 * @LastEditTime: 2021-08-07 10:07:02
 * @Description: 缺陷库
-->
<template>
    <div id="defectLib" v-if='defectLibShow'>
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left" />
                </template>
            </Theader>
        </div>

        <!-- 任务列表 -->
        <div class="listPart">
            <!-- <van-row class="bg_4dbfae header search_header" type="flex" justify='space-around'>
                <van-col span="21">
                    <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                        @search="search" shape="round" background="#F5F6FA" placeholder="请输入缺陷名称">
                    </van-search>
                </van-col>
                <van-col span="3">
                    <img class="sizer" src="../../images/icon-screen.png">
                </van-col>
            </van-row> -->
            <div class="itemList">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getDefectDicInfo">
                    <div class="defectItem" @click="selectDefect(item)" v-for="(item,i) in defectLibList" :key="i">
                        <div class="rightPart">
                            <!-- <div class="timePart">
                                <div class="fristBox">
                                    <div>
                                        <div class="sub">油浸变压器</div>
                                        <div class="bt">本体</div>
                                    </div>
                                    <div>
                                        <div>缺陷性质：</div>
                                        <div class="defectXz">{{'「'+item.defectNatureText+'」'}}</div>
                                    </div>
                                </div>
                                <div class="box">
                                    <div>部件名称：</div>
                                    <div class="textShow">{{item.defectPositionText}}</div>
                                </div>
                                <div class="box">
                                    <div>缺陷描述：</div>
                                    <div class="textShow">{{item.defectDesc}}</div>
                                </div>
                                <div class="box">
                                    <div>分类依据：</div>
                                    <div class="textShow">{{item.classificationStandardText}}</div>
                                </div>
                            </div> -->
                            <div class="timePart">
                                <div class="box"><div>设备种类：</div><div class="textShow">{{item.deviceKindName}}</div></div>
                                <div class="box"><div>缺陷部位：</div><div class="textShow">{{item.positionTypeText}}</div></div>
                                <div class="box"><div>部件名称：</div><div class="textShow">{{item.defectPositionText}}</div></div>
                                <div class="box"><div>缺陷描述：</div><div class="textShow">{{item.defectDesc}}</div></div>
                                <div class="box"><div>分类依据：</div><div class="textShow">{{item.classificationStandardText}}</div></div>
                                <div class="box"><div>缺陷性质：</div><div class="textShow">{{item.defectNatureText}}</div></div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import Theader from "../component/header"
    import { getDefectDicInfo } from "../../api/defect"
    export default {
        name: "defectLib",
        components: {
            Theader
        },
        props: {
            // 组件显示控制器
            defectLibShow: {
                type: Boolean,
                default() {
                    return false
                }
            },
            // 设备类型id
            deviceTypeId: {
                type: String,
                default() {
                    return ""
                }
            }
        },
        data() {
            return {
                title: "添加缺陷",
                userId: JSON.parse(localStorage.getItem('userInfo')).userId,
                defectLibList: [],// 缺陷库列表,
                defectData: {},// 缺陷库列表
                defectContent: '',// 缺陷库列表  
                keyWord: null,// 关键字查询
                loading: false,//加载状态
                finished: false,//加载完成
                total: 0,// 总条数
                pageNum: 1,// 当前页
                pageSize: 10,// 每页条数
            }
        },
        created() { },
        mounted() { },
        methods: {

            /**
             * @description: 返回
             */
            back() {
                this.$emit('close')
            },

            /**
             * @description:选择缺陷 
             * @param {*}
             * @return {*}
             */
            selectDefect(item) {
                this.defectData = item
                this.$emit('close', this.defectData)
            },

            search() {
                this.defectLibList = []
                this.getDefectDicInfo()
            },

            /**
              * @description: 查询缺陷库
              * @param {*}
              * @return {*}
              */
            getDefectDicInfo() {
                var self = this
                // 非法字符
                var regExp = /[@#\$%\^&\*\!\！\(\)\（\）\……\￥\&\_\-\——\=\+]+/g
                if (regExp.test(this.keyWord)) {
                    this.$toast("查询内容含非法字符")
                    return
                }
                // var params = {
                //     deviceType: this.deviceTypeId,// 设备类型id
                //     roleCode: "",
                //     userId: this.userId,// 用户id
                //     keyWord: this.keyWord,// 关键字
                //     pageSize: this.pageSize,// 页面条数
                //     pageNum: this.pageNum,// 页码
                // }
                var params = {
                    "pageNum": 1,
                    "pageSize": 10,
                    "deviceType": "0322", "roleCode": "", "userId": "915142429"
                }
                this.$toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "正在获取...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                // 获取缺陷库
                getDefectDicInfo(params).then(res => {
                    if (res.success) {
                        self.$toast.clear()
                        // 加载状态开始
                        self.loading = true;
                        var rows = res.data// 当前页返回的数据
                        self.defectLibList = self.defectLibList.concat(res.data)// 合并数据
                        // self.total = res.pageInfo.total// 总条数
                        self.total = 30
                        if (self.defectLibList.length >= self.total) {
                            self.finished = true;// 加载结束
                        } else {
                            self.pageNum++
                            // 加载状态结束
                            self.loading = false;// 加载结束
                        }
                    } else {
                        self.defectLibList = []
                        self.total = 0
                    }
                }).catch(err => {
                    self.$toast.clear()
                })
            },


        },
    }
</script>
<style scoped>
    #defectLib {
        background-color: rgba(250, 250, 250, 1);
        position: absolute;
        top: 0;
        left: 0;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        /* margin-top: 3rem; */
        width: 100%;
        border-radius: 4px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .tc-keyword-wrapper {
        margin: 5px 0;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .scan {
        margin: 0 10px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        margin-right: 10px;
    }

    /* 任务列表 */
    .listPart {
        padding: 0 10px 10px;
        height: calc(100vh - 125px);
        /* overflow-y: auto; */
        width: 96vw;
        margin: 0 auto;
        margin-top: 2%;
        background: #F5F6F7 !important;
    }

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
    }

    .defectItem .leftPart {
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        margin-right: 20px;
    }

    .defectItem .rightPart {
        width: 100%;
    }

    .defectItem .rightPart .topPart {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectItem .rightPart .topPart .status.red {
        background: #eb3b3b;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.blue {
        background: #1481ee;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.orange {
        background: orange;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.grey {
        background: green;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.green {
        background: #ccc;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .describ {
        margin: 5px 0;
        color: #333;
    }

    .defectItem .rightPart .val333 {
        color: #333;
    }

    .van-search__action {
        display: none;
    }

    .van-icon-search::before {
        content: '\F0AF';
        font-size: 1.5rem;
        color: #999999;
    }


    .van-image {
        position: unset;
    }

    .listPart /deep/.van-cell {
        position: unset !important;
    }

    .listPart /deep/.van-cell__value {
        position: unset !important;
    }

    .textShow {
        /* display: inline-block; */
        width: 78%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box {
        display: flex;
        margin-top: 0.5rem;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .red {
        color: red;
    }

    .itemList {
        margin-top: 2%;
        height: calc(100vh - 130px);
        overflow-y: auto;
    }

    .sub {
        color: #333333;
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: left;
    }

    .bt {
        color: #999999;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 11px;
        letter-spacing: 0px;
        text-align: left;
        margin-left: 0.5rem;
    }

    .defectXz {
        color: #0EB295;
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: right;
    }

    .sizer {
        width: 2rem;
        height: 2rem;
        margin-left: 1rem;
    }
</style>